<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/ionicons/2.0.1/css/ionicons.min.css"
      rel="stylesheet"
    />
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        width: 100%;
        height: 100vh;
      }
      .sidebar {
        width: 100px;
        height: 100%;
        background: #2c3e50;
        float: left;
        margin-left: -100px;
        overflow: hidden;
        transition: 0.8s all;
      }
      .side {
        margin-left: 0px;
      }
      ul {
        width: 100%;
        height: 30px;
        float: left;
      }
      li {
        list-style: none;
        width: 100%;
        height: 50px;
        text-align: center;
        margin: 40px 0;
      }
      a {
        width: 100%;
        height: 100%;
        font-size: 40px;
        text-decoration: none;
        color: #fff;
      }
      .btn {
        width: 50px;
        height: 50px;
        float: left;
        font-family: Ionicons;
        cursor: pointer;
        color: #2c3e50;
        text-align: center;
      }
      .btn:before {
        content: "\f20d";
      }
      .btnc:before {
        content: "\f12a";
      }
    </style>
  </head>
  <body>
    <div class="sidebar">
      <ul>
        <li><a href="#" class="ion-social-tux"></a></li>
        <li><a href="#" class="ion-social-python"></a></li>
        <li><a href="#" class="ion-social-chrome"></a></li>
        <li><a href="#" class="ion-social-twitch"></a></li>
        <li><a href="#" class="ion-social-youtube"></a></li>
        <li><a href="#" class="ion-social-rss"></a></li>
      </ul>
    </div>
    <a href="#" class="btn"></a>
    <script>
      /**
       * @Description:侧边栏隐藏
       * @DescriptionLink:https://www.bilibili.com/video/BV154411e7FN?from=search&seid=8041723113976037904
       * @author [前端特效] [HTML+CSS] 6分钟写一个带隐藏切换的侧边导航栏
       * @date 2020/7/26
       **/
      $(function () {
        $(".btn").click(function () {
          $(this).toggleClass("btnc");
          $(".sidebar").toggleClass("side");
        });
      });
    </script>
  </body>
</html>
